<!--页面组件-->
<template>
  <div class="productLine">
    <div class="tempxyz rightTable">
      <CCard class="rightCard">
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <span class="textTitle"> 推送任务列表</span>
          </div>
          <div class="header-right-wraper">
            <div class="search-wrapper">
              <CInput
                maxlength="30"
                placeholder="按任务名称搜索..."
                v-model="name"
                class="input-search-style"
                @keyup.enter="enterfaction"
              />
              <!-- 搜索 -->
              <!-- <img
              class="iconstylesearch"
              src="@/assets/icons/search.png"
              v-if="showimgsearchicon"
              @click="getAuto"
              alt
            /> -->
              <!-- 清除 -->
              <!-- <img
                class="iconstyleoff"
                src="@/assets/icons/clear.png"
                v-if="showimgofficon"
                @click="clearmess"
                alt
              /> -->
              <CButton
                @click="getAuto"
                color="info"
                class="header-search system-btn-style"
              >
                搜索
                <!-- <CIcon
                name="cil-magnifying-glass"
                style="height: 14px; width: 14px"
              />&nbsp;&nbsp; -->
              </CButton>
            </div>
            <CButton
              color="info"
              class="header-main-btn system-btn-style"
              @click="add"
              data-permission="Btn_PushTask_Add"
            >
              <CIcon name="cil-plus" />&nbsp;任务
            </CButton>
          </div>
        </CCardHeader>
        <CCardBody class="card-body">
          <div style="height: calc(100% - 45px)">
            <TableList
              ref="table"
              :dataList.sync="dataList"
              :getColumn="getColumns"
              :getAxios="getAxios"
            >
              <template v-slot:sourceId="item">
                <span v-html="getTaskTypeLabel(item.data.row)"></span>
              </template>


              <template v-slot:crontabExpress="item">
                  {{ getSaoMiaoJianGe(item.data.row)}}
              </template>

              <template v-slot:show_details="item">
                <CButton
                  title="启用"
                  v-if="item.data.row.status === 1"
                  class="textBtnStyle system-btn-style"
                  @click="run(item.data.row)"
                  data-permission="Btn_PushTask_Star"
                >
                  启用
                </CButton>
                <CButton
                  title="暂停"
                  v-if="item.data.row.status === 0"
                  class="textBtnStyle system-btn-style"
                  @click="ban(item.data.row)"
                  data-permission="Btn_PushTask_Pause"
                >
                  暂停
                </CButton>
                <CButton
                  title="编辑"
                  class="textBtnStyle system-btn-style"
                  @click="update(item.data.row)"
                  data-permission="Btn_PushTask_Up"
                >
                  编辑
                </CButton>
                <CButton
                  title="删除"
                  class="textBtnStyle system-btn-style"
                  @click="del(item.data.row)"
                  data-permission="Btn_PushTask_Del"
                >
                  删除
                </CButton>
              </template>
            </TableList>
            <!-- <CDataTable
              :items="data"
              :fields="fields"
              hover
              border
              class="BodyContent"
            >
              <template #show_details="{ item }">
                <td> -->

            <!-- 以下之前注释的 -->
            <!-- <CButton
                  v-c-tooltip="'启用'"
                  title="启用"
                  v-if="item.status == 1"
                  class="buttonMargin writeBtn"
                  @click="run(item)"
                  data-permission="Btn_PushTask_Star"
                >
                  <CIcon class="colortempstyle" name="cil-power-standby" />
                </CButton>
                <CButton
                  v-c-tooltip="'暂停'"
                  title="暂停"
                  v-if="item.status == 0"
                  class="buttonMargin writeBtn"
                  @click="ban(item)"
                  data-permission="Btn_PushTask_Pause"
                >
                  <CIcon class="colortempstyle" name="cil-media-stop" />
                </CButton>
                <CButton
                  v-c-tooltip="'编辑'"
                  title="编辑"
                  color="rgb(2,40,88)"
                  class="buttonMargin writeBtn"
                  @click="update(item)"
                  data-permission="Btn_PushTask_Up"
                >
                  <img
                    class="featuresstyle"
                    src="@/assets/icons/edit.svg"
                    alt
                  />
                </CButton>
                <CButton
                  v-c-tooltip="'删除'"
                  title="删除"
                  color="rgb(2,40,88)"
                  class="buttonMargin deleteBtn"
                  @click="del(item)"
                  data-permission="Btn_PushTask_Del"
                >
                  <img
                    class="featuresstyle"
                    src="@/assets/icons/delete.svg"
                    alt
                  />
                </CButton> -->
            <!-- 以上之前注释的 -->
            <!--
                  <CButton
                    title="启用"
                    v-if="item.status == 1"
                    class="textBtnStyle"
                    @click="run(item)"
                    data-permission="Btn_PushTask_Star"
                  >
                    启用
                  </CButton>
                  <CButton
                    title="暂停"
                    v-if="item.status == 0"
                    class="textBtnStyle"
                    @click="ban(item)"
                    data-permission="Btn_PushTask_Pause"
                  >
                    暂停
                  </CButton>
                  <CButton
                    title="编辑"
                    class="textBtnStyle"
                    @click="update(item)"
                    data-permission="Btn_PushTask_Up"
                  >
                    编辑
                  </CButton>
                  <CButton
                    title="删除"
                    class="textBtnStyle"
                    @click="del(item)"
                    data-permission="Btn_PushTask_Del"
                  >
                    删除
                  </CButton>
                </td>
              </template>
              <template #sourceId="{ item }">
  <td>
    <span v-html="getTaskTypeLabel(item.sourceId)"></span>
  </td>
</template>
            </CDataTable> -->
          </div>
        </CCardBody>
        <!-- <CCardFooter class="page-link">
          <CRow>
            <CCol class="footerPage" style>
              <span class="pageContent">
                每页
                <CSelect
                  @change="getVendorId($event)"
                  :options="[10, 15, 20, 25]"
                  v-model="pageSize"
                  class="selectStyle"
                  style
                />
                条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                  this.allNum
                }}条记录)
              </span>
              <CPagination
                :activePage.sync="currentPage"
                :pages="total"
                align="end"
                v-if="total != 0"
              />
            </CCol>
          </CRow>
        </CCardFooter> -->
      </CCard>
    </div>
    <!-- +任务 -->
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除任务信息"
      :width="600"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">删除任务信息</p>
      <div class="modalBody">
        <p>删除节点时与任务相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="runShow"
      draggable
      scrollable
      title="启动任务提示"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">启动任务提示</p>
      <div class="modalBody">
        <p>请确认是否启动任务?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="runCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="runOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="banShow"
      draggable
      scrollable
      title="暂停任务提示"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">暂停任务提示</p>
      <div class="modalBody">
        <p>请确认是否暂停任务?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="banCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="banOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal v-model="addTask" draggable scrollable title="新增任务" :width="970">
      <p slot="header" class="modalHeader">新增任务</p>
      <CButtonClose slot="close" @click="addTaskCancel"></CButtonClose>
      <div>
       <!-- <updateAddtask></updateAddtask> -->
        <addTask ref="addTask" @closeAddTask="closeAddTask123"></addTask>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="addTaskCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addTaskOk" color="info" class="system-btn-style"
          >保存</CButton
        >
      </template>
    </Modal>
    <!-- 编辑任务 -->
    <Modal
      v-model="updateTask"
      draggable
      scrollable
      title="编辑任务"
      :width="800"
    >
      <p slot="header" class="modalHeader">编辑任务</p>
      <CButtonClose slot="close" @click="updateTaskCancel"></CButtonClose>
      <div>
        <updateTask
          ref="updateTask"
          @closeupdateTask="closeupdateTask"
        ></updateTask>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="updateTaskCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateTaskOk" color="info" class="system-btn-style"
          >保存</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<!--js代码-->
<script>
import addTask from "@/views/pushTask/addTask.vue";
import updateTask from "@/views/pushTask/updateTask.vue";
import TableList from "@/template/table/TableList";
import updateAddtask from "@/views/pushTask/updateAddtask"
 const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:82px;background:rgba(241,244,249,1);",
    align: "left",
  },
  {
    key: "taskName",
    label: "任务名称",
    align: "center",
    _style: "width:auto;background:rgba(241,244,249,1);",
  },
  {
    key: "sourceId",
    label: "任务类型",
    align: "center",
    _style: "width:auto;background:rgba(241,244,249,1);",
  },
  {
    key: "crontabExpress",
    label: "扫描间隔",
    align: "center",
    _style: "width:auto;background:rgba(241,244,249,1);",
  },
  {
    key: "createTime",
    label: "创建时间",
    align: "center",
    _style: "width:210px;background:rgba(241,244,249,1);",
  },
  {
    label: "操作",
    key: "show_details",
    slot: "show_details",
    _style: "width:200px;background:rgba(241,244,249,1);",
    align: "center",
  },
];
export default {
  name: "pushTask",
  data() {
    return {
      modalStyle: { top: "300px" },
      dataList: [],
      updId: 0,
      searchName: 0,
      runShow: false,
      banShow: false,
      delShow: false,
      data: [],
      clickId: 0,
      fields,
      loading: true,
      currentPage: 1,
      pages: 0,
      total: 0,
      allNum: 0,
      pageSize: 15,
      name: "",
      status: "",
      showimgsearchicon: true,
      showimgofficon: false,

      addTask: false,
      updateTask: false,

      cronList: [],

      getColumns: [
        {
          title: "任务名称",
          key: "taskName",
        },
        {
          title: "任务类型",
          key: "sourceId",
          slot: "sourceId",

          width: 300,
          className: "centerText",
        },
        {
          title: "扫描间隔",
          key: "crontabExpress",
          slot: "crontabExpress",
          width: 300,
          className: "centerText",
        },
        {
          title: "创建时间",
          key: "createTime",
          width: 300,
          className: "centerText",
        },
        {
          title: "操作",
          key: "show_details",
          slot: "show_details",
          width: 300,
          className: "centerText",
        },
      ],
      getAxios: {
        url: this.$api.processingApi.autoTaskQuery, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },
    };
  },
  watch: {
    // data(newVal, oldVal) {
    //   this.$nextTick(function () {
    //     this.GlobalPermissionRender.render();
    //   });
    // },
    name(newVal, oldVal) {
      if (newVal.length >= 50) {
        this.$Message.warning("名称长度不得超过50个字符");
      }
      if (newVal == "") {
        this.showimgsearchicon = true;
        this.showimgofficon = false;
      } else {
        this.showimgsearchicon = false;
        this.showimgofficon = true;
      }
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getAuto();
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getAuto();
    },
   /* dataList(newVal, oldVal) {
      this.dealWithScanInterval();
    },*/
  },
  mounted() {
    /* 获取字典表 */
    //this.getCronList();
  },
  methods: {
    getVendorId(event) {
      let tempdata = event.target.value; //获取option对应的value值
      this.pageSize = parseInt(tempdata);
    },
    clearmess() {
      this.name = "";
      this.status = "";
      this.getAuto();
    },
    enterfaction() {
      this.currentPage = 1;
      this.getAuto();
    },
    update(val) {
 /*     this.updId = val.id;
      this.updateTask = true;
      this.$refs.updateTask.getAuto(this.updId);*/
      this.$router.push({
        path:'/taskManage/newPushTask',
        query:{data:val}
      })
    },
    updateTaskCancel() {
      this.updateTask = false;
      this.$refs.updateTask.reset();
    },
    updateTaskOk() {
      this.$refs.updateTask.save(this.updId);
    },
    del(val) {
      this.delShow = true;
      this.clickId = val.id;
    },
    run(val) {
      this.runShow = true;
      this.clickId = val.id;
    },
    runOk() {
      let self = this;
      self.dataList = [];
      let path = this.$api.processingApi.updateStatus + "/" + this.clickId;
      let param = {
        status: 0,
      };
      this.runShow = false;
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          this.getAuto();
          this.$Message.success("启动成功");
        } else {
          this.$Message.error(res.data.message);
          this.getAuto();
        }
      });
    },
    runCancel() {
      this.runShow = false;
    },
    ban(val) {
      this.banShow = true;
      this.clickId = val.id;
    },
    banOk() {
      this.dataList = [];
      let path = this.$api.processingApi.updateStatus + "/" + this.clickId;
      let param = {
        status: 1,
      };

      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          this.banShow = false;
          this.getAuto();
          this.$Message.success("暂停成功");
        } else {
          this.$Message.error(res.data.message);
          this.getAuto();
        }
      });
    },
    addTaskCancel() {
      this.$refs.addTask.reset();
    },
    addTaskOk() {
      this.$refs.addTask.save();
    },
    closeAddTask123(params) {
      this.addTask = params;
      this.getAuto();
    },
    closeupdateTask(params) {
      this.updateTask = params;
      this.getAuto();
    },
    banCancel() {
      this.banShow = false;
    },
    delCancel() {
      this.delShow = false;
    },
    delOk() {
      let self = this;
      let path = this.$api.processingApi.autoTaskDelete + "/" + self.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          this.getAuto();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.delShow = false;
    },
    add() {
        this.$router.push({
          path:'/taskManage/newPushTask',
          query:{}
        })

      // this.addTask = true;
      // this.$refs.addTask.cronList = this.cronList;
      // this.$refs.addTask.init();
    },

    dealWithScanInterval() {
      for (let i = 0; i < this.dataList.length; i++) {
        let data = this.dataList[i];

        for (let cron of this.cronList) {
          if (data.crontabExpress == cron.value) {
            data.crontabExpress = cron.label;
          }
        }
      }
    },
    getAuto() {
      let self = this;
      self.dataList = [];
      let pageSize = this.pageSize;
      let path = this.$api.processingApi.autoTaskQuery;
      let param = {
        pageNum: self.pageNum,
        name: self.name.trim(),
        status: self.status,
        pageSize: pageSize,
      };
      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
    },
    getCronList() {
      let path = this.$api.processingApi.getAllChildByDictCode;
      let param = {
        dictCode: "cron",
      };
      this.http.get(path, param).then((res) => {
        if (res.data.code == 0) {
          let dictCodeList = res.data.data.dictCodeList;
          this.cronList.push({ label: "请选择", value: "" });
          for (let dictCode of dictCodeList) {
            let cron = {
              label: dictCode.dictName,
              value: dictCode.dictCode,
            };
            this.cronList.push(cron);
          }
        } else {
          this.$Message.error(res.data.message);
        }

        this.getAuto();
      });
    },
    getTaskTypeLabel(item) {
      let sourceId = item.sourceId;
      if (!sourceId) return "其他";
      if (sourceId == 1) {
        return "应急任务";
      } else if (sourceId == 2) {
        return "常规任务";
      } else if (sourceId == 3) {
        return "MODIS任务";
      } else {
        return sourceId;
      }
    },

    getSaoMiaoJianGe(data) {
      let taskParameter = JSON.parse(data.taskParameter);
      if (taskParameter.scanType===1) { return  taskParameter.scanInterval+"分钟"   }
      else if (taskParameter.scanType===2){return  taskParameter.scanInterval+"小时" }
      else if (taskParameter.scanType===3){return  taskParameter.scanInterval+"天" }
      else if (taskParameter.scanType===4){return  taskParameter.scanInterval+"月" }
      else {return "暂无数据"}
    }
  },
  components: { addTask, updateTask, TableList ,updateAddtask},
};
</script>

<!--css样式-->
<style scoped>
.c-footer.c-footer-fixed {
  z-index: 900;
}
.buttonMargin {
  margin-right: 5px;
}

.card-header-actions {
  display: flex;
  position: absolute;
  top: -10px;
  left: 158%;
}
.writeBtn {
  color: rgb(2, 40, 88);
}
.deleteBtn {
  color: rgb(2, 40, 88);
}

.container {
  position: absolute;
  width: 100%;
  top: 23px;
}
.card {
  min-width: 730px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
</style>
<style scoped>
/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}
</style>
